<template>
    <el-dialog v-model="props.visible" title="添加类型" :before-close="beforeClose">
        <el-form :model="props.Editform" label-width="150px" style="max-width: 670px">
            <el-form-item label="排序:" prop="editlx">
                <el-input v-model="Editform.sort" />
            </el-form-item>
            <div class="btn">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup lang='ts'>
import { defineProps, watch, ref, reactive, withDefaults } from "vue";
import type { Ref } from 'vue'
import * as api from '../request/api'

let props = withDefaults(
    defineProps<{
        visible: boolean;
        Editform: any
    }>(),
    {
        visible: true,
    }
);
// 监听事件
watch(() => props.Editform, (newVal) => {
    console.log(newVal);
    props.Editform.sort = { ...newVal }
})

// 自定义事件
const emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: any): void;
}>();
//关闭
let beforeClose = (done: any) => {
    // console.log('beforeClose')
    emits("cancel")
}
// 取消
let onCancel = () => {
    // 清空 实际上是点击取消的时候，将form恢复成备份的值
    props.Editform.sort = ''
    emits("cancel")
}

// 确定
let onConfirm = () => {
    // console.log(form.value);
    // console.log(row);
    // console.log(props.Editform.sort);

    emits('confirm', props.Editform.sort)
}


</script>


<style lang = "scss" scoped></style>